<template>
	<view>
		<view>
			<u-swiper :list="list1"></u-swiper>
		</view>
		<view>
			<view class="left">
				<p class="left_p">{{infor.shop_name}}</p>
				<p style="font-size: 12px;margin-top: 10rpx;margin-left: 25rpx;float: left;"><span style="color: #000">原&nbsp;&nbsp;&nbsp;价:</span>￥{{infor.price}}元</p>
				<p style="font-size: 12px;margin-top: 10rpx;color: #FD8402;margin-left: 25rpx;float: right;"><span style="color: #000">可抵扣:</span>￥{{infor.coupon_price}}元</p>
			</view>
			<view class="right">
				<view class="right_l" @click="share_bt">
					<view style="border: none;background-color: rgb(85 0 0 / 0%)">
						<u-icon name="share-square" color="#000000" size="28"></u-icon>
						<p style="font-size: 10px;margin-top: -5rpx;color: #000000;margin-left: 10rpx;">分享</p>
					</view>
				</view>
				<!-- <view class="right_r" @click="collect">
					<u-icon name="star" color="#000000" size="28"></u-icon>
					<p style="font-size: 10px;margin:-5rpx auto auto 5rpx;">收藏</p>
				</view> -->
			</view>
		</view>
		<view class="line">
			<u-line color="#646464"></u-line>
		</view>
		<view>
			<view class="left" @click="go_address">
				<view class="left_l">
					<u-icon name="map-fill" color="#646464" size="20"></u-icon>
				</view>
				<view class="left_r">{{infor.address}}</view>
			</view>
			<view class="right">
				<view style="margin-top: -5rpx;" @click="call_custom">
					<u-icon name="phone-fill" color="#FD8402" size="28"></u-icon>
				</view>
			</view>
		</view>

		<view class="u-content">
			<p style="margin-top: 10rpx;font-size: 16px;font-weight: 600;margin-bottom: 10rpx;">商品详情：</p>
			<u-parse :content="infor.content"></u-parse>
			<view class="button" @click="exchange(id)">
				<button style="background-color: #FD8402;text-align: center;height: 80rpx;color: #fff;border-radius: 30rpx;" @click="exchange">
					<p style="margin-top: -15rpx;">抵扣劵兑换</p>
				</button>
			</view>
		</view>

		<!-- 分享 -->
		<view>
			<u-popup :show="show" mode="bottom" @close="close" @open="open">
				<button open-type="share" style="width: 750rpx;height: 200rpx;background-color: #fff;">
					<u-icon name="weixin-circle-fill" color="#55C23C" size="45px" labelPos="bottom "></u-icon>
					<p style="font-size: 10px;color: #999999;">分享给好友</p>
				</button>
				<u-line color="#d6d7d9"></u-line>
				<view style="width: auto;height: 80rpx;background-color: #fff;text-align: center;" @click="close">
					<p style="margin-top: 13rpx;font-size: 13px;color: #666666;font-weight: 500;">取消</p>
				</view>
			</u-popup>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				disabled: true,
				list1: [],
				infor: {},
				id: '',
				get_img: this.$get_img,
				show: false,
				click:0
			}
		},
		onLoad(option) {
			// this.get_detail()
			let that = this
			if (option.id) {
				that.id = option.id
				that.get_detail(option.id)
			} else {
				uni.navigateBack()
			}
			
		},
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
			}
			let sys = uni.getStorageSync("sys")
			return {
				title: "分享页面",
				path: '/pages/index/index?id=' + this.id + "&type=share",
				success(res) {
					console.log("分享成功")
					console.log("this.id：", this.id)
				}
			}
		},
		methods: {
			get_detail(id) {
				console.log("id:", id)
				let that = this
				this.$model.get("user/goods/get_goods_id?id=" + this.id).then(res => {
					if (res.code == 200) {
						that.infor = res.data
						console.log("this.infor:", that.infor)
						that.infor.banners.map(item => {
							item = that.get_img + item
							that.list1.push(item)
						})
					}
				})
			},
			go_address() {
				uni.openLocation({
					latitude: this.infor.lng,
					longitude: this.infor.lat,
					name: this.infor.address,
					success: function() {
						console.log('success')
					}
				})

			},
			exchange(id) {
				let that = this
				
				if(this.click != 0){
					return
				}
				this.$model.get('user/goods/create_order?id=' + this.id).then(res => {
					if (res.code == 200) {
						uni.showToast({
							title: "兑换成功"
						})
						setTimeout(function() {
							uni.navigateTo({
								url: '/pages/coupon/coupon_hx'
							})
						}, 2000)
					}
				})
				this.click = 1
			},
			open() {

			},
			close() {
				this.show = false
			},
			share_bt() {
				this.show = true
			},
			call_custom() {
				console.log("call_custom:", this.infor.phone)
				uni.makePhoneCall({
					phoneNumber: this.infor.phone
				})
			},

		}
	}
</script>

<style>
	.left {
		float: left;
		width: 550rpx;
		height: 100rpx;
	}

	.left_p {
		margin: 30rpx 0 0 30rpx;
	}

	.right {
		margin-top: 10rpx;
		float: right;
		width: 100rpx;
		height: 100rpx;
	}

	.right_l {
		float: left;
		width: 120rpx;
		height: 10rpx;
		/* margin-left: 180rpx; */
		margin-top: 20rpx;
	}

	.right_r {
		float: right;
		width: 135rpx;
		height: 100rpx;
	}

	.line {
		margin-top: 130rpx;
		width: 750rxp;
		height: 10rpx;
	}

	.left_l {
		float: left;
		width: 50rpx;
		height: 90rpx;
		margin: 10rpx 0 0 10rpx;
	}

	.left_r {
		float: right;
		width: 370rpx;
		height: 80rpx;
		margin: 13rpx 120rpx 0 0;
		font-size: 13px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.u-content {
		width: 700rpx;
		margin: 100rpx 25rpx 0 25rpx;
		z-index: 9999;
		position: absolute;
	}

	.button {
		z-index: 999;
		position: fixed;
		bottom: 0;
		width: 700rpx;
		font-size: 50rpx;
		margin-top: 20rpx;
		margin-bottom: 30rpx;
	}
</style>
